<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>房租&押金</title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="../../../static/css/weui_new.css"/>
    <script type="text/javascript" src="../../../static/js/zepto.min.js"></script>
    <script src="../../../static/js/weui.js"></script>
    <!--引入vue，axios-->
    <script src="../../../static/js/vue.js"></script>
    <script src="../../../static/js/axios.min.js"></script>

    <link rel="stylesheet" href="../../../static/css/weui.css">
    <link rel="stylesheet" href="../../../static/css/weui2.css">
    <link rel="stylesheet" href="../../../static/css/weui3.css">
    <style>
        .weui-form-preview-label{
            color: #ffffff;
        }
    </style>
</head>
<body>

<div class="container" id="moneyManagement">
    <section v-if="home">
        <div class="page list js_show">
            <div class="page__bd">
                <div class="weui-cells__title" style="height: 40px;line-height: 40px;margin: 0;background-color: #EDEDED">押金&房租</div>
                <div class="weui-cells">
                    <a href="javascript:;" class="weui-cell weui-cell_access" @click="listDetail('押金管理')">
                        <div class="weui-cell__hd" style="vertical-align: middle;line-height: 20px">
                            <img src="../../../static/images/押金管理-128PX.png" style="padding-right: 10px" width="30px" alt="">
                        </div>
                        <div class="weui-cell__bd" style="vertical-align: middle">
                            <p>押金管理</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                    <a href="javascript:;" class="weui-cell weui-cell_access" @click="listDetail('房租账单')">
                        <div class="weui-cell__hd" style="vertical-align: middle;line-height: 20px">
                            <img src="../../../static/images/房租账单-128PX.png" style="padding-right: 10px" width="30px" alt="">
                        </div>
                        <div class="weui-cell__bd" style="vertical-align: middle">
                            <p>房租账单</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                </div>
                <div class="weui-cells__title" style="height: 40px;line-height: 40px;margin: 0;background-color: #EDEDED">其他</div>
                <div class="weui-cells">
                    <a href="javascript:;" class="weui-cell weui-cell_access">
                        <div class="weui-cell__hd" style="vertical-align: middle;line-height: 20px">
                            <img src="../../../static/images/资金流水-128PX.png" style="padding-right: 10px" width="30px" alt="">
                        </div>
                        <div class="weui-cell__bd" style="vertical-align: middle">
                            <p>资金流水</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!--押金管理list-->
    <section v-if="depositList">
        <div class="weui-form-preview">
            <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">合同编号</label>
                    <span class="weui-form-preview__value">213213213123321</span>
                </div>
            </div>
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">月租金</label>
                    <span class="weui-form-preview__value">1500.00</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">租期</label>
                    <span class="weui-form-preview__value">20170101-20170202</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">经纪人</label>
                    <span class="weui-form-preview__value">王轩 150383733232</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">合同状态</label>
                    <span class="weui-form-preview__value color-orange">待审批</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">押金状态</label>
                    <span class="weui-form-preview__value color-orange">尚未支付押金</span>
                </div>
            </div>
            <div class="weui-form-preview__ft">
                <div class="weui-btn-area view-btn" style="width: 100%;">
                    <a class="weui-btn weui-btn_plain-primary"
                       href="javascript:;">查看</a>
                </div>
            </div>
        </div>
    </section>
    <!--房租账单list-->
    <section v-if="orderList">
        <div class="weui-form-preview">
            <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">合同编号</label>
                    <span class="weui-form-preview__value">213213213123321</span>
                </div>
            </div>
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">月租金</label>
                    <span class="weui-form-preview__value">1500.00</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">租期</label>
                    <span class="weui-form-preview__value">20170101-20170202</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">经纪人</label>
                    <span class="weui-form-preview__value">王轩 150383733232</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">已还账单</label>
                    <span class="weui-form-preview__value">0/12</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">最近应还款日期</label>
                    <span class="weui-form-preview__value color-orange">2018-01-01</span>
                </div>
            </div>
            <div class="weui-form-preview__ft">
                <div class="weui-btn-area view-btn" style="width: 100%;">
                    <a class="weui-btn weui-btn_plain-primary"
                       href="javascript:;" @click="checkDetail()">查看</a>
                </div>
            </div>
        </div>
    </section>
    <section v-if="orderListDetail">
        <div class="weui-form-preview" style="background-color: #82AE47;color: #fff;">
            <div class="weui-form-preview-hd" style="line-height: 2em">
                <label class="weui-form-preview-label" style="font-size: 1em;">合同编号：</label>
                <em class="weui-form-preview-value" style="font-size: 1em;height: 32px">321312411431413</em>
                <label class="weui-form-preview-label">租期：</label>
                <span class="weui-form-preview-value" style="font-size: 1em;height: 32px;">2018-1029</span>
                <label class="weui-form-preview-label">房源地址：</label>
                <span class="weui-form-preview-value" style="font-size: 1em">北京市望京soho大时代撒多多撒多撒沙发飞洒发</span>
            </div>
        </div>
        <div class="weui_cells weui_cells_checkbox" style="margin-bottom: 100px">
            <label class="weui_cell weui_check_label">
                <div class="weui_cell_hd">
                    <input type="checkbox" class="weui_check">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary" style="font-size: 1rem">
                    <p >￥21323</p>
                    <!--{{Number(item.amount).toFixed(2)}}-->
                </div>
                <div class="weui_cell_ft" style="font-size: 1rem">
                    应还款日期
                </div>
            </label>
        </div>
        <div class="weui-form-preview" style="position: fixed ;bottom: 0;width: 100%;">
            <div class="weui-form-preview-ft">
                <span style="padding-left: 50px;width: 50%;">待支付100元</span>
                <a style="background-color: #82AE47;color: #FFFFFF" class="weui-form-preview-btn weui-form-preview-btn-primary">立即还款</a>
            </div>
        </div>
    </section>
</div>
<script src="../../../static/app/moneyManagement.js"></script>
</body>
</html>